<template>
  <div>
    <el-button
      type="primary"
      icon="el-icon-edit"
      size="small"
      v-if="show == false"
      @click="show = !show;getMessages()"
      >给我留言</el-button
    >
    <i class="el-icon-close" v-else @click="show = !show"></i>
    <div v-if="show" class="container">
      <el-input
        type="text"
        size="small"
        placeholder="你要给我留言嘛！！"
        v-model="str"
        maxlength="20"
        show-word-limit
        @keydown.enter.native="submit"
      ></el-input>
      <el-button size="small" @click="submit">留言</el-button>
      <ul class="box" ref="box">
        <li v-for="(item, index) in arr.slice().reverse()" :key="index">
          <div class="everyMessage">
            <span class="content" :style="item.color">{{ item.content }}</span>
            <span class="date">{{ item.time }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getAllMessgaes, insertMessgae } from "@/api/messageboard";
export default {
  data() {
    return {
      str: "",
      arr: [],
      show: false,
    };
  },
  methods: {
    submit() {
      this.submitMessages(this.str);
    },
    //查询留言
    getMessages() {
      getAllMessgaes().then((res) => {
        this.arr = res.data;
        // console.log(res.data);
        this.arr.forEach((item)=>{
          item.time = this.filterTime.filterTime(item.time);
          item.color = 'color:' + this.randomColor.randomColor();
        })
      });
    },
    //新增留言
    submitMessages(str) {
      if(str == false){
        this.$notify.info({
            title: '错误',
            message: '请输入内容',
            duration: 1000,
        });
        return;
      }
      insertMessgae(str).then((res) => {
        // console.log(res);
        if(res.code == 403){
          this.$notify.error({
            title: '错误',
            message: '30s内只允许评论一次'
          });
        }else if(res.code == 200){
          this.getMessages();
        }
      });
      this.str = "";
    },
  },
  // created() {
  //   this.getMessages();
  // },
};
</script>

<style scoped>
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  margin-top: 5px;
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; */
}
.container {
  transition: width 1s;
}
.box {
  border-radius: 5px;
  width: 300px;
  height: 200px;
  background-color: #fff;
  overflow: scroll;
}
.el-input {
  width: 80%;
}
.everyMessage {
  height: 40px;
  /* background-color: red; */
  position: relative;
  margin: 0 10px;
}
.content {
  display: block;
  width: 100%;
  font-size: 15px;
  border-bottom: 1px solid gray;
  position: absolute;
  top: 15px;
  left: 0;
}
.date {
  position: absolute;
  top: 0;
  left: -20px;
  font-size: 5px;
  font-family: KaiTi;
  transform: scale(0.7);
}
</style>